<template>
	<view class="container">
		<view class="top">
			<image class="avatar" :src="userInfo.avatar" mode="" />
			<view class="user-info">
				<text class="username">{{ userInfo.username }}</text>
				<br>
				<text class="account-id">学号ID：{{ userId }}</text>
			</view>
		</view>
		<view class="sidebar">
			<view class="top-id">推荐功能</view>
			<view class="menu-item" @click="navigateTo('myCourses')">
				<image class="icon" src="../../static/image/我的课程.png" mode="aspectFit" />
				<text>我的课程</text>
				<view class="avatar-icon"></view>
			</view>
			<view class="menu-item">
				<image class="icon" src="../../static/image/我的成绩.png" mode="aspectFit" />
				<text>我的成绩</text>
			</view>
			<view class="menu-item">
				<image class="icon" src="../../static/image/练习.png" mode="aspectFit" />
				<text>练习记录</text>
			</view>
			<view class="menu-item" @click="shoucang">
				<image class="icon" src="../../static/image/收藏.png" mode="aspectFit" />
				<text>我的收藏</text>
			</view>
			<view class="menu-item" @click="navigateTo('shezhi')">
				<image class="icon" src="../../static/image/设置.png" mode="aspectFit" />
				<text>设置</text>
			</view>
			<view class="menu-item" @click="showSharePanel">
				<image class="icon" src="../../static/image/分享.png" mode="aspectFit" />
				<text>分享好友</text>
			</view>
		</view>
		<!-- 新增：遮罩层 -->
		<view v-if="isShareVisible" class="mask" @click="hideSharePanel"></view>
		<!-- 新增：分享面板 -->
		<view v-if="isShareVisible" :animation="shareAnimation" class="share-panel">
			<view class="share-content" @click.stop>
				<view class="item">
					<image src="/static/image/QQ.png" mode=""></image>
					<image src="/static/image/bd.png" mode=""></image>
					<image src="/static/image/wb.png" mode=""></image>
					<image src="/static/image/wx.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import shezhiVue from '../shezhi/shezhi.vue';
	export default {
		data() {
			return {
				userInfo: JSON.parse( uni.getStorageSync('userInfo'))|| {
					avatar: '../../static/image/人物头像.png',
					username: '欢迎登录',
					
				},
				userId: uni.getStorageSync('userId') || '',
				isShareVisible: false,
				shareAnimation: {}
			};
		},
		onLoad() {
			this.fetchUserInfo();
		},
		onShow() {
				// 每次页面显示时重新从本地获取最新数据
				const storedUserInfo = uni.getStorageSync('userInfo');
				if (storedUserInfo) {
					this.userInfo = storedUserInfo;
				}
			},
		methods: {
			fetchUserInfo() {
				uni.request({
					url: 'https://your-backend-service.com/api/userInfo', // 连接后端替换为实际的API地址
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + this.$store.state.token // 假设你使用了token进行身份验证
					},
					success: (res) => {
						if (res.statusCode === 200) {
							this.userId = res.data.id; // 假设返回的数据结构中包含id字段表示学号
						}
					},
					fail: (err) => {
						console.error('Failed to fetch user info', err);
					}
				});
			},
			shoucang() {
				uni.navigateTo({
					url: "/pages/shoucang/shoucang"
				})
			},
			navigateTo(page) {
						uni.navigateTo({
							url: `/pages/${page}/${page}`
						});
					},
			// 显示分享面板（带动画）
			showSharePanel() {
				const animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease'
				});

				animation.bottom(0).opacity(1).step(); // 从底部弹出

				this.shareAnimation = animation.export();
				this.isShareVisible = true;
			},
			// 隐藏分享面板（带动画）
			hideSharePanel() {
				const animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease'
				});

				animation.bottom('-200rpx').opacity(0).step(); // 收回到底部

				this.shareAnimation = animation.export();

				setTimeout(() => {
					this.isShareVisible = false;
				}, 300); // 动画结束后隐藏
			}
		}
	};
</script>

<style lang="scss">
	.top {
		background: linear-gradient(to top, whitesmoke, lightcyan);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}

	.avatar {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		margin-bottom: 20px;
	}

	.user-info {
		text-align: center;
		margin-bottom: 20px;
	}

	.username {
		font-size: 24px;
		margin-bottom: 5px;
	}

	.top-id {
		margin: 5px;
		margin-bottom: 10px;
		font-size: 18px;
	}

	.account-id {
		font-size: 16px;
		color: #666;
	}

	.sidebar {
		width: 100%;
		height: 100%;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 15px;
		margin-bottom: 10px;
		border-radius: 8px;
		background-color: white;
		cursor: pointer;
	}

	.icon {
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}

	.text {
		font-size: 16px;
		color: #333;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		/* 半透明黑色 */
		z-index: 998;
		/* 确保在主内容之下，分享面板之上 */
	}

	.share-panel {
		position: fixed;
		bottom: -200rpx;
		/* 初始在屏幕外 */
		left: 0;
		right: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.share-content {
		background-color: #fff;
		padding: 50rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		width: 80%;
		height: 100rpx;
		margin-bottom: 120rpx;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.item image {
		width: 120rpx;
		height: 120rpx;
		border: none;
		border-radius: 20rpx;
	}
</style>